<template>
  <div class="app-container">
    <el-row type="flex" style="justify-content: space-between">
      <div style="flex: 1; min-width: 0;margin-right: 5px; ">
    <div v-if="detailInfo.carOutStorage.purchaseSource !== 6">
      <storage-customer-info :value="detailInfo"></storage-customer-info>
      <storage-out-car-info :value="detailInfo"></storage-out-car-info>
    </div>
    <div v-else>
      <leaseContract state="detail" v-model="detailInfo" />
      <carReplacementService state="detail" v-model="detailInfo" />
      <vehicleInformationZD state="detail" v-model="detailInfo" />
    </div>
    <CommonContainer :title="detailInfo.carOutStorage.purchaseSource !== 6 ? '出库信息' : '替车出库信息'">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="出库时间" prop="outStorageTime">
              <el-date-picker style="width: 100%" v-model="form.outStorageTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="datetime" placeholder="选择出库时间"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库里程(km)" prop="outboundMileage">
              <el-input v-model="form.outboundMileage" placeholder="请输入出库里程"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库油量(%)" prop="outboundOilQuantity">
              <el-input v-model="form.outboundOilQuantity" placeholder="请输入出库油量"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="上传交车单" prop="deliveryNoteOss">
              <image-common v-model="form.deliveryNoteOss" :up-type="2" :limit="20" info="交车单"></image-common>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库里程表" prop="outboundMileageOss">
              <image-common v-model="form.outboundMileageOss" :up-type="2" :limit="20" info="里程表"></image-common>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库油量表" prop="outboundOilQuantityOss">
              <image-common v-model="form.outboundOilQuantityOss" :up-type="2" :limit="20" info="油量表"></image-common>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" placeholder="若有新车前替车场景，请在备注中填写替车时效并上传有关附件" v-model="form.remark" maxlength="500" :rows="5" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="detailInfo.carOutStorage.purchaseSource !== 6">
            <el-form-item label="附件" prop="attachmentOss">
              <div class="flex">
                <image-common :up-type="2" info="上传附件" :limit="20" v-model="form.attachmentOss"></image-common>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-else>
            <el-form-item label="车头照片" prop="ztZP">
              <div class="flex">
                <image-common :up-type="2" info="上传附件" :limit="20" v-model="form.ztZP"></image-common>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </CommonContainer>
    </div>
    <FlowRecord v-if="flowId" :id="flowId" :customStyle="{minWidth:'280px',marginBottom:'20px'}"/>
        </el-row>

    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submitForm(1)">保存</el-button>
      <el-button type="primary" @click="submitForm(2)">提交审批</el-button>
    </div>
  </div>
</template>

<script>
import StorageCustomerInfo from '@/views/carInventory/components/StorageCustomerInfo.vue'
import StorageOutCarInfo from '@/views/carInventory/components/StorageOutCarInfo.vue'
import leaseContract from '@/views/carInventory/components/leaseContract.vue'
import carReplacementService from '@/views/vehicleOrder/suborderManagement/components/carReplacementService.vue'
import vehicleInformationZD from '@/views/vehicleOrder/suborderManagement/components/vehicleInformationZD.vue'
import * as outInventoryApi from '@/api/carInventory/outInventory'
export default {
  components: { StorageOutCarInfo, StorageCustomerInfo, leaseContract, carReplacementService, vehicleInformationZD },
  props: {},
  data() {
    return {
      detailInfo: { carOutStorage: { purchaseSource: null } },
      form: {
        outboundId: this.$route.query.id, //入库id
        outboundMileage: null, //出库里程
        outboundMileageOss: null, //出库里程附件
        outboundOilQuantity: null, //入库油量
        outboundOilQuantityOss: null, //出库油量附件
        attachmentOss: null, //附件
        remark: null, //备注,
        saveFlag: 0,
        outStorageTime: null, //出库时间
      },
      rules: {
        outboundMileage: [
          { required: true, message: '请输入出库里程', trigger: 'blur' },
          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输⼊正确的格式,可保留两位⼩数' },
        ],
        outboundMileageOss: [{ required: true, message: '请上传出库里程表照片', trigger: 'blur' }],
        outStorageTime: [{ required: true, message: '请选择出库时间', trigger: 'change' }],
        outboundOilQuantity: [
          { required: true, message: '请输入出库油量', trigger: 'change' },
          { pattern: /^[0-9]*$/, message: '请输入正整数' },
        ],
        outboundOilQuantityOss: [{ required: true, message: '请上传出库油量照片', trigger: 'blur' }],
        deliveryNoteOss: [{ required: true, message: '请上传上传交车单', trigger: 'blur' }],
        ztZP: [{ required: true, message: '请上传车头照片', trigger: 'blur' }],
      },
      viewType: 0, //0:新增 1.编辑
      // isShow:false,
      flowId: null,
    }
  },
  computed: {},
  methods: {
    // 获取入库单详情
    getDetail() {
      outInventoryApi.outStorageDetails(this.form.outboundId).then((res) => {
        this.flowId = res.data?.carOutStorage?.flowId
        this.detailInfo = { ...res.data, inboundId: this.$route.query.inboundId }
        this.form = res.data.carOutStorage
        // this.isShow = true
      })
    },
    //保存|提交
    submitForm(type) {
      this.form.saveFlag = type
      if (type == 1) {
        //保存
        this.insertCarOutStorage()
        // if (this.viewType == 1){//编辑
        //     this.updateCarOutStorage()
        // }else{//新增

        // }
      } else if (type == 2) {
        //提交审批
        this.commitApproval()
      }
    },
    //提交审批
    commitApproval() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.submitOutStorage()
        }
      })
    },
    //保存
    insertCarOutStorage() {
      const loading = this.$loading({
        lock: true,
        text: '保存中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      outInventoryApi
        .insertCarOutStorage({ ...this.detailInfo, ...this.form })
        .then((res) => {
          if (res.code == 200) {
            loading.close()
            this.cancel()
          }
        })
        .catch(() => {
          loading.close()
        })
    },
    //编辑
    submitOutStorage() {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      outInventoryApi
        .submitOutStorage({ ...this.detailInfo, ...this.form })
        .then((res) => {
          if (res.code == 200) {
            loading.close()
            this.cancel()
          }
        })
        .catch(() => {
          loading.close()
        })
    },
    cancel() {
      this.$router.back()
    },
  },
  mounted() {
    this.getDetail()
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 15px;
  width: 70%;
}
</style>
